import React from 'react';
import { Card, Row, Col, Typography } from 'antd';
import {
  BookOutlined,
  ShoppingCartOutlined,
  ClusterOutlined, 
  ShieldOutlined,
  KeyOutlined,
  DashboardOutlined, 
  DatabaseOutlined,
  EyeOutlined, 
  TagsOutlined,
  ShoppingOutlined, 
  CreditCardOutlined,
  TruckOutlined,
  BranchesOutlined, 
  AppstoreOutlined, 
  UserSwitchOutlined, 
  LockOutlined,
  AuditOutlined, 
} from '@ant-design/icons';
import './index.scss';

const { Title, Paragraph } = Typography;

const FeatureModules = () => {
  return (
    <div className="feature-modules">
      <Row gutter={[24, 24]} className="modules-grid">
        {/* 图书管理模块 */}
        <Col xs={24} md={12} lg={6}>
          <Card className="module-card">
            <div className="card-icon">
              <BookOutlined />
            </div>
            <div className="card-content">
              <Title level={2} className="card-title">图书管理</Title>
              <Paragraph className="card-description">
                支持海量图书数据的高效管理，包括图书信息维护、库存跟踪、分类管理等功能。
              </Paragraph>
              <ul>
                <li><EyeOutlined /> 图书信息维护</li>
                <li><DatabaseOutlined /> 库存跟踪</li>
                <li><TagsOutlined /> 分类管理</li>
              </ul>
            </div>
          </Card>
        </Col>

        {/* 电商系统模块 */}
        <Col xs={24} md={12} lg={6}>
          <Card className="module-card">
            <div className="card-icon">
              <ShoppingCartOutlined />
            </div>
            <div className="card-content">
              <Title level={2} className="card-title">电商系统</Title>
              <Paragraph className="card-description">
                完整的电商交易流程，支持在线下单、支付处理、订单跟踪、用户管理等。
              </Paragraph>
              <ul>
                <li><ShoppingOutlined /> 在线下单</li>
                <li><CreditCardOutlined /> 支付处理</li>
                <li><TruckOutlined /> 订单跟踪</li>
              </ul>
            </div>
          </Card>
        </Col>

        {/* 系统核心模块 */}
        <Col xs={24} md={12} lg={6}>
          <Card className="module-card">
            <div className="card-icon">
              <ClusterOutlined />
            </div>
            <div className="card-content">
              <Title level={2} className="card-title">系统核心</Title>
              <Paragraph className="card-description">
                系统核心功能模块，提供强大的业务支持和数据处理能力。
              </Paragraph>
              <ul>
                <li><DatabaseOutlined /> 数据处理</li>
                <li><BranchesOutlined /> 业务流程</li>
                <li><AppstoreOutlined /> 系统集成</li>
              </ul>
            </div>
          </Card>
        </Col>

        {/* 系统安全模块 */}
        <Col xs={24} md={12} lg={6}>
          <Card className="module-card">
            <div className="card-icon">
              <ShieldOutlined />
            </div>
            <div className="card-content">
              <Title level={2} className="card-title">系统安全</Title>
              <Paragraph className="card-description">
                提供完整的安全保障体系，包括用户认证、权限管理、数据加密等多重防护机制。
              </Paragraph>
              <ul>
                <li><UserSwitchOutlined /> 身份认证</li>
                <li><LockOutlined /> 访问控制</li>
                <li><AuditOutlined /> 安全审计</li>
              </ul>
            </div>
          </Card>
        </Col>
      </Row>

      {/* 性能优化特性 */}
      <div className="performance-section">
        <Row gutter={[24, 24]} className="performance-cards">
          <Col xs={24} md={8}>
            <Card className="performance-card">
              <div className="card-icon">
                <KeyOutlined />
              </div>
              <div className="card-content">
                <Title level={3} className="performance-card-title">Key策略优化</Title>
                <Paragraph className="performance-card-description">
                  采用Vue.js最佳实践，支持多种Key绑定策略。
                </Paragraph>
              </div>
            </Card>
          </Col>

          <Col xs={24} md={8}>
            <Card className="performance-card">
              <div className="card-icon">
                <DashboardOutlined />
              </div>
              <div className="card-content">
                <Title level={3} className="performance-card-title">性能监控</Title>
                <Paragraph className="performance-card-description">
                  实时监控系统性能指标，确保系统稳定运行。
                </Paragraph>
              </div>
            </Card>
          </Col>

          <Col xs={24} md={8}>
            <Card className="performance-card">
              <div className="card-icon">
                <DatabaseOutlined />
              </div>
              <div className="card-content">
                <Title level={3} className="performance-card-title">大数据处理</Title>
                <Paragraph className="performance-card-description">
                  优化大数据量场景下的流畅体验。
                </Paragraph>
              </div>
            </Card>
          </Col>
        </Row>
      </div>
    </div>
  );
};

export default FeatureModules;